<template>
<div class="content">
  <div class="banaer">
    <div class="container">
    <div class='head'><a @click="goLink()">我的评论</a>／我的回复</div>
    <el-table :data="tableData"style="width: 100%">
      <el-table-column  type="index"  width="50">
      </el-table-column>
      <el-table-column label="内容" width="360" prop="content">
      </el-table-column>
      <el-table-column label="回复" prop="toName" >
      </el-table-column>
      <el-table-column label="发布时间" width="160" getLocalTime :formatter="dateFormat" prop="updateTime">
      </el-table-column>
      <el-table-column label="操作" align="center" width="124">
        <template slot-scope="scope">
          <el-popover ref="popover{{$index}}" class="aew" placement="top" >
            <p>删除 {{ scope.row.title }} ？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="cancel()">取消</el-button>
              <el-button size="mini" type="danger" round @click="handleDelete(scope.$index, scope.row)">确定</el-button>
            </div>
          </el-popover>
          <el-button size="mini" type="danger" v-popover:popover{{$index}} ><i class="el-icon-delete"/></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination v-show="totalCount!==0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      pageParam: { fo: true },
      currentPage: 1,
      totalCount: 0,
      tableData: []
    }
  },
  created() {
    if(JSON.parse(sessionStorage.getItem('u')) === null || JSON.parse(sessionStorage.getItem('u')).uid === undefined){
      this.$router.push('/login')
    }else{
      this.pageParam.paramId = JSON.parse(sessionStorage.getItem('u')).uid
      this.getData()
    }
  },
  computed: {
    ...mapGetters([
      'reply'
    ])
  },
  methods: {
    handleCurrentChange(val) {
      this.pageParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    handleDelete(index, row) {
      document.querySelector("#app").click()
      var _this = this
      console.log(row)
      this.$ajax.get('/api/bg/removeReply?id=' + row.replyId).then(function(response){
        _this.getData()
      }).catch(function(error){console.log(error)})
    },
    dateFormat(row, column) {  
      return this.getDateTime(row[column.property])
    },
    getData() {
      var _this = this
      this.$ajax.post('/api/bg/getReplyByUid',_this.pageParam).then(function(response){
        _this.tableData = response.data.data.content
        _this.totalCount = response.data.data.totalElements
      }).catch(function(error){console.log(error)})
    },
    cancel() {
      document.querySelector("#app").click()
    },
    goLink() {
      this.$router.push('/comment')
    }
  }
}
</script>

<style lang='stylus' rle='stylesheet/stylus'>
.banaer
  padding-top 10px
  // background url(../images/new/m_banner_bak1.png)
  background-position top center
  background-repeat no-repeat
  min-width 1000px
  .container
    width 1000px
    margin 0 auto
    overflow hidden
    position relative
    .head
      font-size 18px
      margin-bottom 14px
.ibadge
  margin-top 10px
  margin-right 40px
a
  text-decoration none
a:hover
  cursor pointer
  color #ff3860
.el-tag--info
  border-color #fff
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pagination
  color #909399
.el-pager li.active
  color	#FFB6C1
.pager
  margin 35px
  text-align center
</style>
